<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.error{
				background: url(images/untitled.png) 0 0 no-repeat;
				font-size: 15px;
				color: red;
				padding-left: 20px;
			}
			.suc{
				background: none;
				color: red;
				font-size: 10px;
			}
		</style>
		<script src="../11-22/练习1：制作今日团购模块/js/jquery-1.12.4.js" type="text/javascript">			
		</script>
		<script type="text/javascript">
			$(function(){
				$("#tel").blur(function(){
					var a=$(this).val();
					if(a.length!=11){
						$(this).next().removeClass("suc").addClass("error").html("电话号码长度为11位");
						return false;
					}
					if(a.charAt(0)!=1){
						$(this).next().removeClass("suc").addClass("error").html("电话号码开头必须是1");
						return false;
					}
					return true;
				});
				$("#yanzhengma").blur(function(){
					var b=$(this).val();
					if(b.length!=6){
						$(this).next().removeClass("suc").addClass("error").html("验证码必须为6位");
						return false;
					}
					return true;
				});
				$("form").submit(function(){
					var $tel=$("#tel");
					var t=$tel.val();
					if(t.length!=11){
						$(this).next().removeClass("suc").addClass("error").html("电话号码长度为11位");
						return false;
					}
					if(t.charAt(0)!=1){
						$(this).next().removeClass("suc").addClass("error").html("电话号码开头必须是1");
						return false;
					}
					return true;
					var $yanzhengma=$("#yanzhengma");
					var y=$yanzhengma.val();
					if(y.length!=6){
						$(this).next().removeClass("suc").addClass("error").html("验证码必须为6位");
						return false;
					}
					return true;
				});
			});
		</script>
	</head>
	<body>
		<form action="bdqn2.html">
			<p>
				手机号
				<input type="text" name="tel" id="tel" placeholder="请输入手机号" /><span></span>
			</p>
			<p>
				验证码
				<input type="text" name="yanzhengma" id="yanzhengma" placeholder="请输入验证码" /><span></span>
			</p>
			<input type="submit" value="提交" />
		</form>
	</body>
</html>
